import React, { useEffect, useState } from "react";
import { View, Image } from "@tarojs/components";
import { AtCurtain } from 'taro-ui'

import styles from './index.module.scss'

const QrcodeCurtain = (props) => {
  const { image = '', showModel = false, onCloseHandle = () => {} } = props

  const [img, setImg] = useState<string>(image)
  const [isOpened, setIsOpened] = useState<boolean>(showModel)

  useEffect(() => {
    setIsOpened(showModel)
  }, [showModel]);

  useEffect(() => {
    setImg(image)
  }, [image]);

  return (
    <View className={styles.qrcodeCurtain}>
      <AtCurtain
        isOpened={isOpened}
        onClose={onCloseHandle}
      >
        <Image
          style='width:100%;height:250px'
          src={img}
        />
      </AtCurtain>
    </View>
  )

}
export default QrcodeCurtain;
